<template>
  <ElDialog :model-value="modal.isShow" :title="title" :width="width">
    <!--    :before-close="handleClose" -->
    <BaseForm v-if="formType" ref="formCom" :type="type" :refName="type" />
    <template v-slot:footer>
      <div class="dialog-footer">
        <ElButton v-for="btn of btns" :key="btn.target" @click="handle(btn.target, btn.isSub)">{{ btn.name }}</ElButton>
      </div>
    </template>
  </ElDialog>
</template>
<script setup lang="ts">
/*
  组件拆分
    modal数据
    isShow store全局属性
    type

    title  MODAL_DATA computed
    width
    btns

    form 数据
    formData  需要父组件的type, 获取数据, 传递
    form 传递, 根据formData处理
    rules 根据formdata 传递
    ref: type 使用全局? 需要引入全局vuex的内容, 而使用传递,可以统一风格


*/

import { ElNotification } from 'element-plus'
import { ref, computed, watch } from 'vue'

import $http from '@/api/http'
import MODAL_DATA from '@/config/modal.config'
import { useModal } from '@/store/modal'
import { $bus } from '@/unit/mitt'

import BaseForm from './BaseForm.vue'

let modal = useModal()
let formCom = ref<typeof BaseForm | null>(null)
let type = computed<string>(() => modal.type)
watch(
  () => modal.isShow,
  (newValue) => {
    let isOpen = (newValue && 'open') || 'close'
    modal?.[isOpen]?.({ type: type.value })
  },
)
let title = computed<string>(() => {
  return MODAL_DATA[type.value]?.title ?? '默认标题'
})
let btns = computed(() => {
  return MODAL_DATA[type.value]?.btns ?? []
})
let width = computed<string>(() => {
  return MODAL_DATA[type.value]?.width ?? '60%'
})
let formType = computed<boolean | string>(() => {
  return MODAL_DATA[type.value]?.formType ?? false
})

function handle(action, isSub) {
  if (isSub) {
    submitForm()
  }
  modal?.[action] && modal[action]()
}

function submitForm() {
  let formData = formCom.value.form
  formCom.value?.blogForm?.validate(async (valid) => {
    if (valid) {
      try {
        console.log(formType.value, formData)
        let result = await $http({ type: formType.value, data: formData })
        console.log(result)
        modal.close()
        // 请求成功后, 需要重新刷新数据, 如何刷新, 跨越组件通信, 使用$bus发排任务 现在就是在什么时机进行触发
        // 在modal点击获取后, 请求刷新, 而事件是一来就确定好了的, 所以触发时机有 $emit决定, 其他的就只需要在create阶段将事件创建完成就行
        // TODO, $bus总线
        $bus.emit('handleResetData')
      } catch (err) {
        console.log(err)
        ElNotification({
          title: '提交失败',
          message: `${err.message}`,
          type: 'error',
        })
      }
      // 这里只需要提交数据就行, 设置$state.token和userInfo 就交给http路由
      // alert('submit!');
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
</script>
